<template>
	<div class="app-container">
		<el-form :model="data.info" :rules="data.rules" :label-width="language == 'en' ? '155' : '100px'" class="w-1/2"
			ref="ruleFormRef">

			<el-form-item :label="$t('source.name') + ':'" prop="title">
				<el-input v-model="data.info.title" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('source.type') + ':'" prop="type">
				<el-select v-model="data.info.type" size="large" disabled>
					<el-option :label="$t('public.picture')" :value="1" />
					<el-option :label="$t('source.video')" :value="2" />
					<el-option :label="$t('source.audio')" :value="3" />
				</el-select>
			</el-form-item>

			<el-form-item :label="$t('machine.custom.material') + ':'" prop="file_path" v-if="data.info.file_path != ''">
				<div v-if="data.info.type == 1" class="flex justify-center">
					<el-image class="max-w-40 max-h-40" :src="data.info.file_path" fit="fill" />
				</div>
				<div v-if="data.info.type == 2" class="max-w-40">
					<Video :url="data.info.file_path" :control="false" />
				</div>
				<div v-if="data.info.type == 3" class="max-w-40">
					<Audio :src="data.info.file_path" controls controlsList="nodownload" />
				</div>
			</el-form-item>

			<el-form-item :label="$t('source.length') + ':'" prop="length">
				<el-input v-model="data.info.length" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('source.width') + ':'" prop="width">
				<el-input v-model="data.info.width" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<el-form-item :label="$t('source.materialSize') + ':'" prop="size">
				{{ getFileSizeUnit(data.info.size) }}
			</el-form-item>

			<el-form-item :label="$t('source.desc') + ':'" prop="desc">
				<el-input v-model="data.info.desc" :placeholder="$t('message.pleaseEnter')" />
			</el-form-item>

			<div class="w-full text-center">
				<div class="inline-block">
					<el-button type="primary" @click="submit(ruleFormRef)">{{ $t('public.save') }}</el-button>
					<el-button @click="cancell">{{ $t('public.cancel') }}</el-button>
				</div>
			</div>

		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { useI18n } from 'vue-i18n'
const { t: $t } = useI18n()
import { updateresource } from '@/api/advment';
import { useRouter, useRoute } from "vue-router";
import { getFileSizeUnit } from '@/utils'
import { onMounted } from 'vue'
let language = ref()
const { locale } = useI18n()
onMounted(() => {
	language.value = locale.value
})
let ruleFormRef = ref<any>();
const router = useRouter()
const route = useRoute()

let data = reactive({
	info: {}, // 素材主体信息
	rules: {
		// 表单验证
		title: { required: true, message: $t('message.pleaseEnter'), trigger: 'blur' }
	},
})
// 取消
let cancell = () => {
	getinfo()
	router.back()
}
// 获取信息
let getinfo = () => {
	data.info = JSON.parse(decodeURI(route.query.l)).info
}

// 保存
let submit = (formEl: FormInstance | undefined) => {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		updateresource(data.info).then(res => {
			if (res.state == 200) {
				ElMessage({
					message: $t('message.modifySuccess'),
					type: 'success'
				});
				router.back()
				return;
			}
			ElMessage({
				message: $t('message.networkFailed'),
				type: 'error'
			});
		});
	})
}

getinfo()

</script>
